@if(data){
<div class="notification-box animate__animated animate__fadeInRight animate__faster"
    [ngClass]="{'animate__fadeOutRight': willClose}" [ngStyle]="{'width':tempWidth +'px'}">
    @switch (data.state) {
    @case ("doing") {
    <div class="box lloading ccenter">
        <div class="ccenter">
            <i class="fa-light fa-spinner-third"></i>
        </div>
        <div class="num-box ccenter">
            {{progressValue}}%
        </div>
    </div>
    }
    @case ("done") {
    <div class="box ccenter done">
        <div class="ccenter">
            <i class="fa-solid fa-check"></i>
        </div>
    </div>
    }
    @case ("error") {
    <div class="box ccenter error">
        <div class="ccenter">
            <i class="fa-solid fa-xmark"></i>
        </div>
    </div>
    }
    @case ("warn") {
    <div class="box ccenter warn">
        <div class="ccenter">
            <i class="fa-solid fa-exclamation"></i>
        </div>
    </div>
    }
    }
    <div class="text-box">
        <div class="ellipsis">{{data.title}}</div>
        <div class="ellipsis text">{{data.text}}</div>
        <div class="btns">
            @if (data.state=='doing'&& data.stop) {
            <div class="btn link red" (click)="stop()">终止</div>
            }
            @if (data.state=='error'&& data.detail) {
            <div class="btn link" (click)="view()">查看详情</div>
            <!-- <div class="btn link" (click)="askAI()">AI助理</div> -->
            }
        </div>
    </div>
    <div class="close btn link ccenter" (click)="close()">
        <i class="fa-light fa-xmark"></i>
    </div>
</div>
}